<template>
  <div>
    <van-popup
      v-model="show2"
      position="top"
      duration="0"
      :style="{ height: '100%' }"
    >
      <van-nav-bar
        fixed
        border
        :title="config.label"
        left-text="返回"
        :left-arrow="true"
        @click-left="show2 = false"
      />
      <div>1&nbsp;</div>
      <div>2&nbsp;</div>
      <div>&nbsp;</div>

      <div v-for="o2mfld in o2mConfig" :key="o2mfld.name">
        <FieldInput
          v-if="checkHidden(o2mfld)"
          v-model="value[o2mfld.name]"
          :new-value="value"
          :old-value="data"
          :config="o2mfld"
          :options="options"
          @change="onChange"
        />
        <!-- v-if="!fld.hidden" -->
      </div>

      <van-button round block @click="onSubmit">
        提交
      </van-button>

      <van-button v-if="op !== 'new-new'" type="danger" @click="onDelete">
        删除
      </van-button>
    </van-popup>
  </div>
</template>

<script>
import FieldInput from './FieldInput'

export default {
  name: 'ViewPopup',

  components: { FieldInput },

  props: {
    show: { type: Boolean, default: false },
    index: { type: Number, default: -1 },
    op: { type: String, default: 'new-new' },

    config: {
      type: Object,
      default: () => {
        return {}
      }
    },

    options: {
      type: Object,
      default: () => {
        return {}
      }
    },

    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {
      showData: {}
    }
  },
  computed: {
    //

    o2mConfig() {
      // console.log('getO2mConfig,', this.config)
      const config = this.config
      const fields = (config.propForView || {}).fields || {}
      return Object.keys(fields).map(item => {
        const meta = (config.fields || {})[item] || {}
        const me = fields[item] || {}
        const label = me.label !== undefined ? me.label : meta.string
        return { name: item, ...meta, ...me, label }
      })
    },

    show2: {
      get() {
        return this.show
      },

      set(val) {
        this.close()
      }
    }
  },

  async created() {},

  mounted() {
    // console.log('O2mPopup, config,', this.config.name, this.config)
    // console.log('O2mPopup, value,', this.value)
    // console.log('O2mPopup, data,', this.data)
  },

  methods: {
    onChange(value, config) {
      console.log('pop , onChange ,', value, config, this.options)
      console.log('pop , onChange ,this.value,', this.value, this.config)
      const Model = this.config.Model.env(this.config.relation)
      if (Model.metadata.onchange) {
        const ret = Model.metadata.onchange({
          value,
          record: this.value,
          field: config.name,
          options: this.options[config.name]
        })
        console.log('pop , onChange ,ret,', ret)
        this.$emit('input', { ...this.value, ...ret })
      }
    },

    checkHidden(fld) {
      // Form page 也有这个函数 ，如果修改 请同步
      // console.log('checkHidden,', fld)
      if (fld.hidden) {
        return false
      }

      if (fld.related) {
        return false
      }

      if (fld.compute) {
        return false
      }

      return true
    },

    onSubmit() {
      // console.log('o2m popup onSubmit,', this.index, this.value)
      this.$emit('submit', {
        op: this.op,
        index: this.index,
        value: this.value
      })
    },

    onDelete() {
      // console.log('o2m popup onDelete,', this.index, this.value)
      this.$emit('submit', {
        op: `${this.op}-del`,
        index: this.index,
        value: this.value
      })
    },

    close() {
      this.$emit('showclose')
    }
  }
}
</script>

<style type="text/css"></style>
